@import './variable.scss';

::v-deep .distribution-dialog {
  height: 70%;
  width: 60%;
  background-color: #1a4969;

  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }

  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(44)});
  }

  .default-scrollbar {
    width: 100%;
    height: calc(100% - #{px(20)});
    background-color: #143e5d;
  }

  .default-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    // margin-right: -#{px(20)} !important;
  }
  .el-container {
    height: 100%;

    .aside-left {
      width: px(200) !important;
      height: 100%;

      .el-tree {
        background-color: #143e5d;
        color: #fff;
        .el-tree-node__expand-icon{
          color: #fff;
          font-size: px(12);
        }
        .el-tree-node__label{
          font-size: px(12);
        }
        .el-tree-node__content {
          height: px(34);
          cursor: default;
          background-color:#143e5d;
      
          &:hover {
            background-color: #1b8db0;
          }
        }
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee;
          color: #ffffff;
        }
      }
      
    }

    .el-main {
      height: 100%;
      padding:0 px(5) px(5) px(5);

      .el-table {
        background-color: #143e5d;
        font-size: px(12);
        .cell{
          line-height: px(20);
          padding: 0;
        }
        td {
          border-bottom: 1px solid #2e67a8;
        }

        tr:hover > td {
          background-color: #2f6b8d;
        }

        .table-herder-custom {
          background-color: #2e67a8;
          color: #fff;
        }

        .table-cell-custom {
          background-color: #143e5d;
          color: #fff;
        }

        .el-table__body tr.current-row > td {
          background-color: #00b2ee !important;
        }
      }

      .el-table::before {
        height: 0;
      }
      
    }
  }

  .aside-right {
    margin-right: px(10);
    margin-bottom: px(20);
    border: 1px solid #00b2ee;
    border-radius: px(5);
    background-color: #143e5d;
    width: px(220) !important;

    .right-scrollbar {
      width: 100%;
      height: calc(100% - #{px(50)});
    }
  
    .right-scrollbar__wrap {
      width: auto;
      // height: 110%;
      overflow-x: hidden;
    }
  
    .input-text {
      height: px(30);
      line-height: px(30);
      display: flex;
      align-items: center;
  
      .el-input {
        margin-left: px(3);
        font-size: px(12);
        .el-input__inner {
          background-color: #143e5d;
          color: #fff;
          font-size: px(12);
          height: px(28);
          line-height: px(28);
        }
      }
  
      .el-button {
        height: px(28);
        line-height: px(28);
        padding: 0 px(6);
        margin: 0 px(2);
        font-size: px(12);
      }
    }
    .distribution-item {
      border: 1px solid rgba(255, 255, 255, 0.4);
      margin: px(3) px(2);
      color: #fff;
      display: flex;
      font-size: px(12);
      div {
        width: 50%;
        height: px(30);
        line-height: px(30);
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  
    .distribution-item:hover {
      background-color: #a4cedb;
    }
    .distribution-commit {
      text-align: center;
      margin-top: px(5);
  
      .el-button {
        height: px(28);
        line-height: px(28);
        width: px(80);
        background-color: #143e5d;
        color: #fff;
        padding: 0;
        font-size: px(12);
      }
  
      .el-button:hover {
        background-color: #409eff;
      }
    }
  }

}

